.editor {
  display: block;
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 5vh 6.4vw;
  z-index: 10;
  
  .poster-bg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 10;
    
    &.active {
      display: block;
    }
  }
  
  .title {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
    font: {
      size: 5.6vw;
      weight: 400;
    }
    color: $black;
    line-height: 1em;
    margin-bottom: 8vh;
  }
  
  .limit {
    display: block;
    position: relative;
    width: 100%;
    text-align: left;
    font: {
      size: 3.2vw;
      weight: 300;
    }
    color: $dgray;
    line-height: 1em;
    margin-bottom: 2vw;
  }
  
  .slogans {
    display: block;
    position: relative;
    width: 100%;
    margin: 0 {
      bottom: 10.5vh;
    }
    padding: 0;
    list-style: none;
    
    li {
      display: block;
      position: relative;
      width: 100%;
      margin-bottom: 1.5vw;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      input {
        display: block;
        position: relative;
        width: 100%;
        height: 12.4vw;
        line-height: 12.4vw;
        padding: 0 3.6vw;
        font: {
          size: 4vw;
          weight: 400;
        }
        color: $black;
        border: 1px solid $border-gray;
      }
    }
  }
  
  .colors {
    display: flex;
    position: relative;
    width: 100%;
    margin: 0 {
      top: 3.5vw;
      bottom: 9vw;
    }
    padding: 0;
    list-style: none;
    flex {
      direction: row;
      wrap: wrap;
    }
    justify-content: space-around;
    align-items: stretch;
    
    li {
      display: block;
      position: relative;
      width: 7.6vw;
      height: 7.6vw;
      padding: 2vw;
      border: 1px solid $border-gray {
        radius: 50%;
      }
      cursor: pointer;
        
      &.white {
        background-color: $white;
      }
        
      &.blue {
        background-color: $sblue;
      }
       
      &.green {
        background-color: $sgreen;          
      }
        
      &.yellow {
        background-color: $syellow;
      }
        
      &.pink {
        background-color: $spink;
      }
      
      &.active {
        cursor: default;
        
        &:after {
          content: '';
          display: block;
          position: relative;
          width: 100%;
          height: 100%;
          border: 1px solid $border-gray {
            radius: 50%;
          }
          background-color: $white;
          box-sizing: border-box;
        }
      }
    }
  }
  
  .gen {
    display: flex;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    flex {
      direction: row;
      wrap: wrap;
    }
    justify-content: space-around;
    align-items: stretch;
    
    li {
      display: inline-block;
      position: relative;
      width: 40vw;
      height: 12vw;
      line-height: 12vw;
      text-align: center;
      border-radius: 10px;
      color: $white;
      font: {
        size: 4.4vw;
        weight: 400;
      }
      cursor: pointer;
      letter-spacing: 0.5em;
      
      &:first-child {
        background-color: $blue;
      }
      
      &:last-child {
        background-color: $dgray;
      }
      
      &.forbidden {
        display: none;
      }
    }
  }
  
  .poster-canvas {
    display: none;
    position: absolute;
    width: 80vw;
    top: 5vw;
    left: 10vw;
    z-index: 11;
    
    &.active {
      display: block;
    }        
  }
}